<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">
				<a-search :isOk="true" @change="searchChange" />
			</block>
		</cu-custom>
		<a-scroll :request="get" ref="aScroll">
			<template #item="{row:x,index}">
				<a-list :value="x" :url="set(x)">
					<template #top-right>
						<text v-if="x.statusName" class="status-icon" :class="x.status?'ok':'no'">{{x.statusName}}</text>
					</template>
				</a-list>
			</template>
		</a-scroll>
	</view>
</template>

<script>
	import {stringObject} from '@/a/utils/api.js';
	export default {
		//上拉触底
		onReachBottom() {
			this.$refs.aScroll.lower();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.$refs.aScroll.get(true).then(res => {
				uni.stopPullDownRefresh();
			});
		},
		data() {
			return {
				stringObject,
				searchText: ''
			}
		},
		methods: {
			set({img,...e}){
				return `./set${stringObject(e)}`;
			},
			searchChange(e) {
				this.searchText = e;
				this.$refs.aScroll.get(true);
			},
			async get(parm = {}) {
				return {
					total: 10,
					data: [{
						name: "校门口设备",
						sonTitle: '设备ID:4324324234',
						remark: "考情、门禁",
						status: true,
						statusName: "启用",
						img: require('./1.png')
					}, {
						name: "校门口设备",
						sonTitle: '设备ID:4324324234',
						remark: "考情、门禁",
						status: false,
						statusName: "禁用",
						img: require('./1.png')
					}]
				}

				return this.$http.post('', {
					...parm,
					name: this.searchText
				}).then(result => {
					return {
						total: result.totalSize,
						data: []
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.status-icon {
		font-size: .8em;
		border: 1px solid;
		border-radius: 8rpx;
		line-height: 1.5em;
		height: 1.6em;
		display: inline-block;
		padding: 0 .5em;
		color: #fff;
		margin-left: .5em;

		&.ok {
			border-color: #06AD56;
			background-color: #07e36e;
		}

		&.no {
			border-color: #ff5500;
			background-color: rgba(255, 85, 0, .4);
		}
	}
</style>
